<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title></title>
	<link rel="stylesheet" href="/public/layui/css/layui.css">
	<link rel="stylesheet" href="/public/css/common.css">
	<script src="/public/js/jquery.min.js"></script>
</head>
<body>
	<div class="login-content">
		<!-- layui-anim layui-anim-up -->
		<div class="login-input layui-anim layui-anim-up" >
			<h3>留言板后台登录</h3>
			<div class="form layui-form">
				<input id="ccount" required lay-verify="ccount" name="ccount" type="text" placeholder="登录账号" autocomplete="off" class="layui-input">
				<input class="layui-input" id="pass" lay-verify="pass" name="pass" type="password" placeholder="登录密码">
				<div class="code">
					<input id="code" class="layui-input" lay-verify="code" type="text" placeholder="图形验证码">
					<canvas id="code_canvas" width="100" height="43"></canvas>
				</div>
				<button class="layui-btn" lay-filter="login" lay-submit="">登录</button>
			</div>			
		</div>
	</div>
</body>
<script src="/public/js/move.js"></script>
<script src="/public/js/code_verify.js"></script>
<script src="/public/layer/layer.js"></script>
<script src="/public/layui/layui.js"></script>
<script src="/public/js/api.js"></script>
<script>
	// 初始化图形验证码
	var Code = new CodeVerify('code_canvas');
	var show_num = [];
	Code.code_verify(show_num);
	// 点击切换图形验证码
	$("#code_canvas").on('click',function(){
		Code.code_verify(show_num);
	})

	layui.use(['form','layer'], function(){
    $ = layui.jquery;
    var form = layui.form;
    var  layer = layui.layer;
    //自定义验证规则
    form.verify({
			ccount: function(val){
				if(!val){
					return '账号不能为空！'
				}
			},
			pass: function(val){
				if(!val){
					return '密码不能为空！'
				}
			},
			code:function(val){
				let num = show_num.join("");
				if(!val){
					return '请输入验证码'
				} else if(val != num){
					$('#code').val('');
					Code.code_verify(show_num);
					return '验证码错误，请从新输入'
				}
			}
		})
		form.on('submit(login)', function(data){
			let d = data.field;
			layer.load();
			_http.login(d, (res) => {
				layer.closeAll('loading');
				if(res.code === 0){
					layer.msg(res.msg);
					setTimeout(() => {
						location.href='/admin'
					}, 1200);
				}	else {
					layer.msg(res.msg);
					$('#pass').val('');
					$('#code').val('');
					Code.code_verify(show_num);
				} 
			});
		})
	})
	
	if (window != top) {
		top.location.href = location.href;
	}
	
</script>
</html>
